<template>
  <div class="all">
    <div class="left">
      <div class="brandName">
        <div class="logo"></div>
      </div>
      <!-- <button v-for="(item, index) in buttonData" :key="index" class="iconfont" :class="item.icon"> -->
      <button
        @click="changeComponent(item, index)"
        v-for="(item, index) in buttonData"
        :key="index"
        :class="{ isSected: currentIndex === index }"
      >
        <img
          style="width: 3vw"
          :src="getSvg(item.icon2)"
          v-if="currentIndex === index"
        />
        <img style="width: 3vw" :src="getSvg(item.icon)" v-else />
        <div class="buttonRight">
          <div>{{ item.CName }}</div>

          <div>{{ item.ENAme }}</div>
        </div>
      </button>

      <div class="leftBottom">
        <span>选 择 语 言：</span>
        <select id="language" v-model="selectedLanguage">
          <option value="" disabled selected hidden>选择语言</option>
          <option v-for="(item, index) in languages" :key="index">
            {{ item }}
          </option>
        </select>
      </div>
    </div>
    <div class="right">
      <div class="compo">
        <component :is="Components"></component>
      </div>
      <div class="exit">
        <span class="version">版 本 号：2024.01.04</span>
        <button class="back" @click="back">返回主界面</button>
      </div>
    </div>
  </div>
</template>
<script setup>
import syestem_maintenanceViewVue from "./shezhiJumpToView/Syestem_maintenance/syestem_maintenanceView.vue";
import sound_managementViewVue from "./shezhiJumpToView/Sound_management/sound_managementView.vue";
import priority_settingViewVue from "./shezhiJumpToView/Priority_setting/priority_settingView.vue";
import network_settingViewVue from "./shezhiJumpToView/Network_setting/network_settingView.vue";
import log_managementViewVue from "./shezhiJumpToView/Log_management/log_managementView.vue";
import general_settingViewVue from "./shezhiJumpToView/General_setting/general_settingView.vue";
import device_managementViewVue from "./shezhiJumpToView/Device_management/device_managementView.vue";
import user_managementViewVue from "./shezhiJumpToView/User_management/user_managementView.vue";
import { onMounted, ref } from "vue";
import { getSvg } from "./js/index";
import { useRoute, useRouter } from "vue-router";
import ClockSetting from "./shezhiJumpToView/Sound_management/soundJumpToView/clockSetting.vue";
// import {device_managementViewVue,general_settingViewVue,log_managementViewVue,network_settingViewVue,priority_settingViewVue,sound_managementViewVue,syestem_maintenanceViewVue,user_managementViewVue}
const currentIndex = ref(0);
const router = useRouter();
const route = useRoute();
const Components = ref(general_settingViewVue);
//返回按钮
const back = () => {
  router.push({ path: "/" });
};
const buttonData = ref([
  {
    // icon: "/src/views/index/jumpToView/icon_shezhi/a-22Cwangluoshezhi.svg",

    icon: "shezhi1",
    icon2: "shezhi1_w",
    CName: "常 规 设 置",
    ENAme: "General setup",
    Components: general_settingViewVue,
  },
  {
    icon: "shebeiguanli",
    icon2: "shebeiguanli_w",
    CName: "设 备 管 理",
    ENAme: "Device management",
    Components: device_managementViewVue,
  },
  {
    icon: "list-music",
    CName: "音 源 管 理",
    ENAme: "Sound management",
    icon2: "list-music_w",
    Components: sound_managementViewVue,
  },
  {
    icon: "paixu2",
    CName: "优 先 级 设 置",
    ENAme: "Priority setting",
    icon2: "paixu2_w",
    Components: priority_settingViewVue,
  },
  {
    icon: "yonghuguanli",
    CName: "用 户 管 理",
    ENAme: "User management",
    icon2: "yonghuguanli_w",
    Components: user_managementViewVue,
  },
  {
    icon: "xitongrizhiguanli",
    CName: "日 志 管 理",
    ENAme: "Log management",
    icon2: "xitongrizhiguanli_w",
    Components: log_managementViewVue,
  },
  {
    icon: "xitongweihu",
    CName: "系 统 维 护",
    ENAme: "System maintenance",
    icon2: "xitongweihu_w",
    Components: syestem_maintenanceViewVue,
  },
  {
    icon: "a-22Cwangluoshezhi",
    CName: "网 络 设 置",
    ENAme: "Network settings",
    icon2: "a-22Cwangluoshezhi_w",
    Components: network_settingViewVue,
  },
]);
//点击左边按钮触发事件
const changeComponent = (_item, index) => {
  currentIndex.value = index;
  console.log("点击了", index);
  Components.value = _item.Components;
};
const languages = ref(["中文", "英语  "]);

onMounted(() => {
  console.log("路由", route.query.data);
  if (route.query.data == "ping") {
    console.log("或来的");
    currentIndex.value = buttonData.value.length - 1;
    Components.value = buttonData.value[buttonData.value.length - 1].Components;
  }
  if (route.query.data == "signin") {
    currentIndex.value = 0;
    Components.value = buttonData.value[0].Components;
    console.log("signin");
  }
  if (route.query.data == "keyboard") {
    currentIndex.value = 0;
    Components.value = buttonData.value[0].Components;
  }
});
</script>
<style lang="less" scoped>
@import url("./sheZhi.less");
</style>